<template>
  <!--
  v-once
  功能：
  当元素或组件上添加了v-once指令后，
  Vue只会在首次渲染时解析和渲染这部分内容，
  之后的数据变化将不会触发这部分内容的重新渲染。
  特点：
  v-once 指令用于仅渲染元素一次。
  通过只渲染一个元素一次，可以提高性能。
  当元素具有 v-once 指令时，其所有子元素在第一次渲染后也会变为静态。
  -->
  <div v-once>{{ content }}</div>
  <button @click="clickButton">按钮</button>
  <hr>
  <!--
  v-pre
  功能：
  使用 v-pre 指令时，不会进行编译操作。
  所有的 Vue 模板语法都将得以完整保留，并会按照其初始的形态进行渲染。
  -->
  <div v-pre>{{ content }}</div>

  <!--v-cloak
  用于隐藏内容，直到编译完成。
  通常，v-cloak 会阻止用户在页面加载期间看到预编译内容（包括大括号）的闪烁。
  要隐藏预编译的内容，元素会被标记为 v-cloak，并定义 CSS 规则来隐藏此内容，直到编译完成。-->
  <!--v-cloak案例: https://www.w3ccoo.com/vue/tryit.asp?filename=tryvue_ref_v-cloak2-->

</template>
<script setup>
  import { ref } from 'vue';
  let content = ref('Hello')

  function clickButton() {
    console.log("button is clicked......")
    content.value = "你好"
  }

</script>

<style scoped>
  button{
    margin-top: 20px;
  }
</style>